<template>
	<view class="changeInfo-page bgimg1 bgF8F8F8">
		<u-navbar :title="$t('hhh.t106')" :autoBack="false" bg-color="transparent" leftIconColor="#ffffff"
			:titleStyle="{'color':'#ffffff'}" @leftClick="leftClick"></u-navbar>
		<u-gap height="150" bgColor="transparent"></u-gap>

		<view class="bglg11 rounded-max-lg p-4 mx-3">
			<view class="flex align-center ">
				<text class="text-black font-weight-bold fs-48 flex-1">{{$t('hhh.t106')}}</text>
				<view>
					<u-upload :fileList="fileList" name="1" :maxCount="1" @afterRead="uploadImage">
						<view class="position-relative flex">
							<image :src="getUser.logo" mode="aspectFill" class="rounded-circle bgF3F4FA"
								style="width: 176rpx;height: 176rpx;"></image>
							<image src="/static/imgs/xiangji.png" mode="aspectFill"
								class="w-48 h-48 position-absolute right-0 bottom-0"></image>
						</view>
					</u-upload>
				</view>
			</view>
			<u-gap height="80" bgColor="transparent"></u-gap>

			<view class="flex align-center fs-28  border-bottom py-3" @tap="openInfo('nickname')">
				<text class="flex-1 ft666666 font-weight-bold">{{$t('hhh.t107')}}</text>
				<text class="text-black">{{getUser.nickname || '--'}}</text>
				<image src="/static/imgs/right_icon.png" mode="aspectFill" class="w-32 h-32 ml-1"></image>
			</view>
			<view class="flex align-center fs-28  border-bottom py-3" @tap="openInfo('gender')">
				<text class="flex-1 ft666666 font-weight-bold">{{$t('hhh.t79')}}</text>
				<text class="text-black">{{getUser.gender === 1?'Male':'Female'}}</text>
				<image src="/static/imgs/right_icon.png" mode="aspectFill" class="w-32 h-32 ml-1"></image>
			</view>
			<view class="flex align-center fs-28  border-bottom py-3" @tap="openInfo('birthday')">
				<text class="flex-1 ft666666 font-weight-bold">{{$t('hhh.t108')}}</text>
				<text class="text-black">{{getUser.birthday || '--'}}</text>
				<image src="/static/imgs/right_icon.png" mode="aspectFill" class="w-32 h-32 ml-1"></image>
			</view>
			<view class="flex align-center fs-28  py-3" @tap="openInfo('bio')">
				<text class="flex-1 ft666666 font-weight-bold">{{$t('hhh.t109')}}</text>
				<text class="ft999999">{{$t('hhh.t110')}}</text>
				<image src="/static/imgs/right_icon.png" mode="aspectFill" class="w-32 h-32 ml-1"></image>
			</view>
		</view>

		<view class="rounded-max-lg bg-white mx-3 px-3 py-2 mt-5">
			<view class="flex align-center fs-28  py-3" @tap="langshow = true">
				<text class="flex-1 ft666666 font-weight-bold">{{$t('hhh.t111')}}</text>
				<text class="text-black">{{getUser.app_language === 1?'简体中文':'English'}}</text>
				<image src="/static/imgs/right_icon.png" mode="aspectFill" class="w-32 h-32 ml-1"></image>
			</view>
		</view>

		<u-gap height="100" bgColor="transparent"></u-gap>
		<view class="flex align-center justify-center donebtn mx-auto text-white fs-28 font-weight-bold mx-3" @tap="logout">
			{{$t('hhh.t23')}}
		</view>

		<u-popup :show="infoShow" :round="10" mode="center">
			<view class="position-relative p-4 box-sizing" style="width: 600rpx;">
				<view class="fs-32 font-weight-bold text-black text-center">{{infoTitle}}</view>

				<view class="bgF6F7F9 rounded-lg px-2 py-1 mt-3" v-if="openType === 'nickname'">
					<u--input inputAlign="center" :placeholder="$t('hhh.t25')" border="surround" v-model="info.nickname"
						:customStyle="{
						'border':0
					}"></u--input>
				</view>

				<view class="px-2 py-1 mt-3" v-if="openType === 'gender'">
					<view class="border mt-4 rounded-lg py-3 text-center box-shadow2" v-for="(item,index) in genders" :key="index"
						:class="info.gender === item.sex?'bg110124 text-white':'text-black'" @tap="changeGender(item)">
						{{item.name}}
					</view>
				</view>

				<view class="bgF6F7F9 rounded-lg  px-2 py-1 mt-5" v-if="openType === 'bio'">
					<u--textarea height="100" v-model="info.intro" :placeholder="$t('hhh.t110')"></u--textarea>
				</view>

				<u-gap height="80" bgColor="transparent"></u-gap>
				<view class="flex align-center justify-center donebtn mx-auto text-white fs-28 font-weight-bold"
					@tap="confirmFn">{{$t('hhh.t24')}}</view>

				<image class="position-absolute closeicon" src="/static/imgs/close.png" mode="aspectFill"
					@tap="infoShow = false"></image>
			</view>
		</u-popup>

		<u-datetime-picker :show="dateshow" v-model="info.date" mode="date" itemHeight="88" :minDate="35192000"
			:cancelText="$t('hhh.t26')" :confirmText="$t('hhh.t24')" @cancel="dateshow = false"
			@confirm="dateConfirm"></u-datetime-picker>

		<u-picker :show="langshow" :columns="columns" itemHeight="88" keyName="name" :cancelText="$t('hhh.t26')"
			:confirmText="$t('hhh.t24')" @cancel="langshow = false" @confirm="langConfirm"></u-picker>
	</view>
</template>

<script>
	import {
		imageToBase64,
		formatTimestamp
	} from '@/utils/common.js'
	import {
		mapGetters
	} from 'vuex'
	import HttpApi from '@/api/httpApi';
	export default {
		data() {
			return {
				fileList: [],
				infoShow: false,
				infoTitle: 'Edit nickname',
				info: {
					nickname: '',
					gender: 1,
					date: '',
					intro: ''
				},
				openType: '',
				genders: [{
						name: 'Male',
						sex: 1
					},
					{
						name: 'Female',
						sex: 2
					}
				],
				dateshow: false,
				langshow: false,
				columns: [
					[{
							name: '简体中文',
							type: 1
						},
						{
							name: 'English',
							type: 2
						},
					]
				],
			}
		},
		computed: {
			...mapGetters(['getUser'])
		},
		methods: {
			logout() {
				uni.removeStorageSync('hhh-token')
				uni.removeStorageSync('user')
				uni.reLaunch({
					url: '/pages/login/login'
				})
			},
			async uploadImage(data) {
				const base64 = await imageToBase64(data.file.url)
				uni.$tools.uploadFile('/boss/upload/image', data.file.url, {
					base64: base64
				}).then(res => {
					console.log(res)
					this.updateInfo({
						logo: res.url
					})
				})
			},
			updateInfo(data) {
				HttpApi.updateInfo(data).then(res => {
					if (res.code === 1) {
						uni.$tools.toast(this.$t('hhh.t105'))
						this.infoShow = false
						this.dateshow = false
						this.langshow = false
						uni.hideLoading()
						this.userInfo()
						if (data.app_language) {
							const lang = data.app_language === 1 ? 'zh-Hans' : 'en';
							this.$i18n.locale = lang
							uni.setStorageSync('hhh-lang', lang)
							uni.setLocale(lang)
						}
					}
				})
			},
			userInfo() {
				HttpApi.userInfo().then(res => {
					if (res.code === 1) {
						this.$store.commit('setUser', res.data)
					}
				})
			},
			openInfo(type) {
				this.openType = type
				if (type === 'nickname' || type === 'gender' || type === 'bio') {
					this.infoTitle = `Edit ${type}`
					this.infoShow = true
				}
				if (type === 'birthday') {
					this.dateshow = true
				}
			},
			changeGender(item) {
				this.info.gender = item.sex
			},
			confirmFn() {
				uni.$tools.showLoading()
				if (this.openType === 'nickname') {
					this.updateInfo({
						nickname: this.info.nickname
					})
				}
				if (this.openType === 'gender') {
					this.updateInfo({
						gender: this.info.gender
					})
				}
				if (this.openType === 'bio') {
					this.updateInfo({
						bio: this.info.intro
					})
				}
			},
			dateConfirm(val) {
				this.updateInfo({
					birthday: formatTimestamp(val.value)
				})
			},
			langConfirm(val) {
				this.updateInfo({
					app_language: val.value[0]['type']
				})
			}
		}
	}
</script>

<style lang="scss">
	.changeInfo-page {
		min-height: 100dvh;
	}
</style>